<template>
    <div class="home-container">
      <!-- 用户已登录时展示近期工作项目卡片 -->
      <div v-if="isLoggedIn" class="recent-projects" style="display: grid;">
        <h3>Recent Projects</h3>
        <br/>
        <div class="project-cards">
          <div v-for="project in recentProjects" :key="project.id" class="project-card">
            <img :src="project.thumbnail" alt="Project Thumbnail" class="thumbnail" />
            <div class="card-content">
              <h4>{{ project.title }}</h4>
              <p>Author: {{ project.author }}</p>
              <p>Created: {{ project.createdAt }}</p>
              <p>Favorites: {{ project.favorites }}</p>
            </div>
          </div>
        </div>
      </div>
      <br v-if="isLoggedIn"/>
      <hr v-if="isLoggedIn"/>
      <br v-if="isLoggedIn"/>
      <!-- 搜索栏 -->
      <div class="search-bar">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="Search for projects..." 
          @input="filterProjects" 
        />
      </div>
  
  
      <!-- 广场公开项目卡片 -->
      <div class="public-projects">
        <h3>My Projects</h3>
        <div class="project-cards">
          <div v-for="project in filteredProjects" :key="project.id" class="project-card">
            <img :src="project.thumbnail" alt="Project Thumbnail" class="thumbnail" />
            <div class="card-content">
              <h4>{{ project.title }}</h4>
              <p>Author: {{ project.author }}</p>
              <p>Created: {{ project.createdAt }}</p>
              <p>Favorites: {{ project.favorites }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useUserStore } from '../stores/userStore';
  
  // 用户登录状态
  const userStore = useUserStore();
  const isLoggedIn = computed(() => userStore.isLoggedIn);
  
  // 项目数据
  const recentProjects = [
    {
      id: 1,
      title: 'Project A',
      thumbnail: 'https://via.placeholder.com/150',
      author: 'Author 1',
      createdAt: '2025-01-10',
      favorites: 12,
    },
    {
      id: 2,
      title: 'Project B',
      thumbnail: 'https://via.placeholder.com/150',
      author: 'Author 2',
      createdAt: '2025-01-12',
      favorites: 9,
    },
  ];
  
  const publicProjects = [
    {
      id: 3,
      title: 'Public Project A',
      thumbnail: 'https://via.placeholder.com/150',
      author: 'Public Author 1',
      createdAt: '2025-01-08',
      favorites: 20,
    },
    {
      id: 4,
      title: 'Public Project B',
      thumbnail: 'https://via.placeholder.com/150',
      author: 'Public Author 2',
      createdAt: '2025-01-15',
      favorites: 30,
    },
    {
      id: 5,
      title: 'Public Project C',
      thumbnail: 'https://via.placeholder.com/150',
      author: 'Public Author 3',
      createdAt: '2025-01-18',
      favorites: 15,
    },
  ];
  
  // 搜索框绑定的数据
  const searchQuery = ref('');
  const filteredProjects = computed(() => {
    return publicProjects.filter((project) => {
      return project.title.toLowerCase().includes(searchQuery.value.toLowerCase());
    });
  });
  
  // 筛选项目
  const filterProjects = () => {
    // This method could be expanded to filter by different criteria
  };
  </script>
  
  <style scoped>
  /* Home Page Styles */
  .home-container {
    padding: 20px;
  }
  
  .search-bar {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .search-bar input {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    border: 1px solid #ccc;
    outline: none;
  }
  
  .search-bar input:focus {
    border-color: #007bff;
  }
  
  .project-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .project-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  
  .project-card .thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
  }
  
  .project-card .card-content {
    padding: 15px;
  }
  
  .project-card h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .project-card p {
    font-size: 14px;
    color: #555;
  }
  
  .project-card p:last-child {
    font-weight: bold;
  }
  
  /* 如果没有登录的情况下 */
  .recent-projects {
    display: none;
  }
  
  .recent-projects h3 {
    text-align: center;
    color: #333;
  }
  
  .public-projects h3 {
    text-align: center;
    color: #333;
    margin-top: 40px;
  }
  </style>
  